<template>
    <div class="home" style="padding: 20px 25px">
        <!-- 头部 -->
        <div class="head" style="display: flex; flex-direction: row; justify-content: space-between">
            <div class="" style="padding: 2px 10px; text-align: center">
                <h1 style="margin: 20px 0; font-size: 38px; color: darkorange">
                    爱看剧
                </h1>
                <div style="line-height: 18px; color: #0bbdd4;">
                    <p class="">那些年陪伴我们成长的经典影视剧盘点</p>
                    <p class="">重温经典、重获喜悦与感动</p>
                </div>
            </div>

            <div class="" style="display: flex; align-items: center">
                <a-input-group>
                    <a-select v-model="selectedVcate" :style="{ width: '95px' }" placeholder="分类">
                        <a-option v-for="item in selectOptions" :value="item" :label="item.label" />
                    </a-select>
                    <a-input-search :style="{ width: '250px' }" placeholder="请输入搜索内容" @search="submitSearch"
                        search-button>
                        <template #button-icon>
                            <icon-search />
                        </template>
                    </a-input-search>
                </a-input-group>
            </div>
        </div>

        <!-- 主内容 -->
        <div class="main" style="margin: 2% 0">
            <a-row justify="start" style="padding: 0 50px">
                <a-col class="link-card card-teleplay" :span="5" @click="goToTeleplay()">
                    <div style="width: 100%; text-align: center;">
                        <span class="link-card-name">电视剧</span>
                    </div>
                </a-col>
                <a-col class="link-card card-movie" :span="5" @click="goToMovie()">
                    <div style="width: 100%; text-align: center">
                        <span class="link-card-name">电影</span>
                    </div>
                </a-col>
                <a-col class="link-card card-animation" :span="5" @click="goToAnimation()">
                    <div style="width: 100%; text-align: center">
                        <span class="link-card-name">动漫</span>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>

</template>

<script>
import { ref, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { IconSearch } from '@arco-design/web-vue/es/icon';

export default {
    components: {
        IconSearch,
    },
    setup() {
        const router = useRouter();

        const selectOptions = ref([{
            label: '电视剧',
            value: '1',
        }, {
            label: '电影',
            value: '2',
        }, {
            label: '动漫',
            value: '3',
        }]);

        // 选中的视频分类
        const selectedVcate = ref();

        // 搜索方法
        const submitSearch = (searchKeywords) => {
            if (!selectedVcate.value) {
                return;
            }
            let { value } = selectedVcate.value;
            if (value == '') {
                return;
            }
            if (searchKeywords == '') {
                return;
            }
            router.push({
                path: '/search',
                query: {
                    vcate: value,
                    keywords: searchKeywords
                }
            });
        };


        const goToTeleplay = () => {
            router.push("/teleplay");
        };
        const goToMovie = () => {
            router.push("/movie");
        };
        const goToAnimation = () => {
            router.push("/animation");
        };
        const goToVariety = () => {
            router.push("/variety");
        };


        return {
            selectOptions,
            selectedVcate,
            submitSearch,

            goToTeleplay,
            goToMovie,
            goToAnimation,
            goToVariety,
        }
    },
};

</script>

<style scoped>
#search-box {
    font-family: "Microsoft YaHei";
    font-size: 14px;
}

input {
    border: 0.5px solid #bca5e6;
    height: 32px;
    float: left;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 5px center;
    padding: 0 10px;
}

#search {
    width: 58px;
    height: 32px;
    float: right;
    background: #ff9800;
    color: white;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
}


.link-card:hover {
    cursor: pointer;
    transform: translateY(-5px);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.link-card {
    height: 220px;
    margin: 20px;
    display: flex;
    align-items: center;
    background-color: #9ec927;
    border-radius: 4px;
    transition: all 0.6s;
}

.card-teleplay {
    background-color: #9ec927;
}

.card-movie {
    background-color: #4e85e2;
}

.card-animation {
    background-color: #9e6aff;
}

.card-variety {
    background-color: #e9661b;
}

.link-card-name {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
}
</style>